<template>
  <div class="container">
    <web-header></web-header>
    <div class="main-wrapper">
      <div class="main-content">
        <router-view :key="key" />
      </div>
    </div>
    <global-footer></global-footer>
  </div>
</template>

<script>
import { NavList, WebHeader, GlobalFooter } from '@/components'

export default {
  components: {
    NavList,
    WebHeader,
    GlobalFooter
  },
  name: 'MainLayout',
  computed: {
    key () {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
}
.container .main-wrapper {
  /*width: 1190px;*/
  margin: 0 auto;
  overflow: hidden;
}
.container .main-wrapper .main-content {
  /*width: 1190px;*/
  /*float: right;*/
  padding: 20px 0;
}
</style>
